<template>
  <div class="social" v-if="showPage">
    <div class="header">
      <div class="navbar" :style="{height: navBarHeight + 'px',lineHeight: navBarHeight + 'px'}">
        <div class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></div>
        <div class="bar-title" :style="{height: titleBarHeight + 'px',lineHeight: titleBarHeight + 'px'}">
          <van-search :value="value"
                      ﻿@tap="toSearchResult"
                      placeholder="最新电影上映啦"
                      :disabled="true"
                      placeholder-style="color:#ffffff"
                      custom-class="socialCustomClass"
                      field-class="socialFieldClass"
                      input-class="socialInputClass"/>
        </div>
      </div>
    </div>
    <div class="social-content" :style="{marginTop: titleBarHeight + statusBarHeight + 'px'}">
      <div class="social-content-roll">
        <classify :classify="classify"></classify>
      </div>
      <div class="social-hotTitle">
        <p>本周热门群组</p>
        <p>TOP10</p>
      </div>
      <hotGroup :hotGroup="hotGroup" @changeStatus="changeStatus"></hotGroup>
      <h1 class="recommend">推荐参与</h1>
      <recommend :recommendList="recommendList"></recommend>
    </div>
  </div>
</template>

<script>
  import classify from '@/components/group/classify'
  import hotGroup from '@/components/group/hotGroup'
  import recommend from '@/components/group/recommend'
export default {
  components:{
    classify,
    hotGroup,
    recommend
    },
  data () {
    return {
      value:'',
      showPage: true,
      navBarHeight: 0,
      titleBarHeight: 44,
      statusBarHeight: 0,
      backgroundList: ["#FB91B5","#86CEFE","#77E6BC","#F7DF4C","#FB9191","#CAFB91","#E691FB","#91FBE8"],
      classify:[],
      hotGroup:[],
      recommendList:[],
      loadingEnd:{
        moduleOne: false,
        moduleTwo: false,
        moduleThree: false
      }
    }
  },
  onPullDownRefresh(){
    this.viewLoad();
    ﻿uni.stopPullDownRefresh() //停止下拉刷新
  },
  methods: {
    changeStatus(index){
      this.hotGroup[index].is_add = 'yes';
      this.gethotPosts();
    },
    toAdded(){
		uni.navigateTo({
			url: "/social/added"
		})
    },
    toSearchResult(){
		uni.navigateTo({
			url: "/social/socialSearch"
		})
    },
    getGroupCatIndex(){
      this.$ajax
        .post(this.$api.groupCatIndex)
        .then(res => {
          let n = 0;
          for(let i = 0; i<res.length; i++){
            res[i].background = this.backgroundList[n];
            n++;
            if(n === 7) {
              n = 0;
            }
          }
          this.classify = res;
          this.loadingEnd.moduleOne = true;
        })
        .catch(err => {
          this.loadingEnd.moduleOne = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    gethotGroup(){
      this.$ajax
        .post(this.$api.hotGroup)
        .then(res => {
          this.hotGroup = res.data;
          this.loadingEnd.moduleTwo = true;
        })
        .catch(err => {
          this.loadingEnd.moduleTwo = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    gethotPosts(){
      this.$ajax
        .post(this.$api.hotPosts)
        .then(res => {
          this.recommendList = res;
          this.loadingEnd.moduleThree = true;
        })
        .catch(err => {
          this.loadingEnd.moduleThree = true;
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    viewLoad(){
      this.loadingEnd = {
        moduleOne: false,
        moduleTwo: false,
        moduleThree: false
      };
      ﻿uni.showLoading({
        title: '加载中',
        mask: true
      });
      this.getGroupCatIndex();
      this.gethotGroup();
      this.gethotPosts();
    },
  },
  onHide(){
    this.showPage= false;
  },
  onShow(){
    this.showPage= true;
    this.viewLoad();
  },
  onShareAppMessage(res){
    ﻿this.$common.share()
  },
  onLoad() {
    ﻿uni.showShareMenu({
      withShareTicket: true
    })
  },
  computed:{
    hideLoading(){
      if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo && this.loadingEnd.moduleThree){
        setTimeout(function(){
          ﻿uni.hideLoading()
            }, 800)
      }
    }
  },
  beforeMount() {
    const self = this;
    ﻿uni.getSystemInfo({
      success(system) {
        self.statusBarHeight = system.statusBarHeight;
        self.platform = system.platform;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  },
}
</script>

<style scoped>
  .header{
    background-color: #EF5A56;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1003;
  }
  .nav-statusbar{
    height: 36rpx;
  }
  .bar-title{
    text-align: center;
    font-size:36rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .social-content{
    padding: 30rpx;
  }
  .social-hotTitle{
    display: flex;
    font-size: 34rpx;
    color: #323232;
    font-weight: bold;
    margin-top: 39rpx;
    margin-bottom: 29rpx;
  }
  .social-hotTitle>p:last-child{
    font-size: 30rpx;
    color: #EF5A56;
    margin-left: 7rpx;
    margin-top: 8rpx;
  }
  .recommend{
    margin: 39rpx 0 29rpx;
    font-size: 34rpx;
    color: #323232;
    font-weight: bold;
  }
</style>
